{% extends '_base_list.html' %}

{% block title %}
    会话管理
{% endblock %}


{% block top_css %}
    {{ super() }}
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">
{% endblock %}


<!-- Content head -->
{% block head_title %}
    会话管理
{% endblock %}
{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">会话管理</a></li>
        <li class="active">离线会话</li>
    </ol>
{% endblock %}


<!-- Content body -->
{% block title_filter %}
    <div class="filter">
        <div class="row">
            <div class="col-xs-12 col-sm-2">
                <div class="form-group">
                    <input type="text" class="form-control" name="create_time" placeholder="请选择日期日期" autocomplete="off">
                </div>
            </div>

            <div class="col-xs-12 col-sm-3 pull-right">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" name="search" placeholder="请输入员工姓名" class="form-control">
                        <span class="input-group-btn">
                            <button name="search" class="btn btn-mint" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_operator %}
    <div class="operator mar-btm">
    </div>
{% endblock %}

{% block body_table %}
    <table id="sessionOnlineTable" class="table table-auto"></table>
{% endblock %}


{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>

    <script type="text/javascript">

        $(function () {
            bees.activeMenuNav('.terminal-session-offline');

            bees.initDaterangepicker($('input[name="create_time"]'),{
                opens: "right",
                timePicker: false,
                timePickerSeconds: false,
                singleDatePicker: false,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            // 回填和初始化默认过滤参数
            var createTimeEle = $("input[name='create_time']");
            var searchEle = $('input[name="search"]');

            var filterParams = JSON.parse(window.sessionStorage.getItem("filterParams"));
            if(filterParams){
                // 回填表单过滤条件
                createTimeEle.val(filterParams.create_time);
                searchEle.val(filterParams.search);
                window.sessionStorage.removeItem("filterParams");
            }else {
                // 默认表单过滤条件
                filterParams = {
                    'create_time': createTimeEle.val(),
                    'search': searchEle.val()
                };
            }
            $.fn.beesTable.defaultFilterParams(filterParams);

            // 初始化表格
            var $tableEle = $("#sessionOnlineTable");
            var options = {
                columns: [
                    {title: '选择', field: 'selected', radio: true},
                    {title: '资产', field: 'asset', sortable: false},
                    {title: '系统用户', field: 'system_user', sortable: false},
                    {title: '用户地址', field: 'remote_addr', sortable: false},
                    {title: '连接协议', field: 'protocol', sortable: false},
                    {title: '终端类型', field: 'login_from', sortable: false},
                    {title: '开始时间', field: 'date_start', sortable: true},
                    {title: '结束时间', field: 'date_end', sortable: false},
                    {title: '执行记录', field: 'exec_time', sortable: false,
                        formatter: function (value, row, index, field) {
                            var replay_url = '{{ url_for("terminal.session-replay", pk="0") }}'.replace("0", row.id);
                            return '<a class="replay btn btn-default btn-xs" data-toggle="tooltip" data-placement="right" title="'+value+'" href="javascript:void(0)" data-url="'+replay_url+'"><i class="fa fa-play-circle" aria-hidden="true"></i> 播放</a>';
                        }
                    },
                    {title: '用户', field: 'user', sortable: false}
                ],
                url:'{{ url_for("terminal.api-session-offline") }}',
                sortName: 'date_start',
                sortOrder: 'desc',
                onLoadSuccess: function () {
                    // 数据加载完成后初始化tooltip
                    $('[data-toggle="tooltip"]').tooltip();

                    $(".replay").on('click', function () {
                        var url = $(this).data('url');
                        window.open(url, '', 'width=800,height=610,left=400,top=100');
                    });
                }
            };
            $tableEle.beesTable(options);

            // 搜索
            bees.bindTableSearch({
                table: $tableEle,
                searches: [
                    {eventType:'change', eventSource:createTimeEle, data:function () {
                            return {'create_time': createTimeEle.val()};
                        }
                    },
                    {eventType:'click', eventSource:$('button[name="search"]'), data: function () {
                            return {'search': searchEle.val()}
                        }
                    }
                ]
            });
        })
    </script>
{% endblock %}
